<template>
    <div style="padding: 30px 30px;background-color: white">
        <a-row>
            <a-col :span="16" :offset="2">
                <div style="border: 1px solid #eaeaea;padding: 20px">
                    <a-comment>

                        <a slot="author">{{commentInfo.anonymous&&commentInfo.anonymous===1?'匿名用户':commentInfo.username?commentInfo.username:''}}</a>
                        <a-avatar
                                slot="avatar"
                                src="http://120.27.212.10:9090/group1/M00/00/00/eBvUCl_ZdgmAGkv5AAJJ7HtejHk284.png"
                                alt="Han Solo"
                        />
                        <div slot="content">

                            <div>
                                <a-rate style="color: red" disabled :value="data.star"/>
                            </div>
                            <div style="font-size: 14px;margin: 13px 0px">
                                {{data.content}}
                            </div>
                            <div class="comment-spec">
                                {{data.spec}} <span
                                    style="margin-left: 20px">{{data.createTime}}</span>
                            </div>
                            <div v-if="data.pictureList&&data.pictureList.length>0">
                                <img
                                        v-for="(pic,pIndex) in data.pictureList" :src="pic"
                                        class="comment-pic"/>
                            </div>

                        </div>

                        <a-comment
                                v-if="data.children&&data.children.length>0"
                                v-for="child in data.children"
                                avatar="http://120.27.212.10:9090/group1/M00/00/00/eBvUCl_ZdgmAGkv5AAJJ7HtejHk284.png"
                        >
                            <a slot="author">{{child.anonymous&&child.anonymous===1?'匿名用户':child.username?child.username:''}}</a>
                            <div slot="content">
                                <div :style="child.fromType===0?{color:'red',fontSize:'16px'}:{}">
                                    {{child.fromType===0?'商家回复：':''}}{{child.content}}
                                </div>
                                <div class="comment-spec">{{child.createTime}}</div>
                            </div>
                        </a-comment>


                    </a-comment>
                    <a-form-item>
                        <a-textarea :rows="4" :placeholder="'回复:'+commentInfo.username||''"
                                    v-model="publishInfo.content"/>
                        <span v-show="publishInfo.content===''" style="color: red">请填写评论信息....</span>
                    </a-form-item>
                    <a-form-item>
                        <a-checkbox v-model="publishInfo.anonymousTemp">匿名评价</a-checkbox>

                        <a-button style="margin-right: 15px;float: right" type="primary" @click="publishComment"
                        >
                            发布评论
                        </a-button>
                    </a-form-item>
                </div>
            </a-col>
            <a-col :span="5" offset="1">
                <div>
                    <a-card title="商品信息" hoverable style="width: 180px;">

                        <img
                                @click="toDetail(data.goodsSku)"
                                slot="cover"
                                alt="example"
                                :src="data.goodsSku&&data.goodsSku.pictures?data.goodsSku.pictures:''"
                        />
                        <div style="height: 70px;font-size: 12px;color: #868686">
                            {{data.goodsSku&&data.goodsSku.name&&data.goodsSku.name.length>60?data.goodsSku.name.substring(0,60):data.goodsSku.name}}
                        </div>
                        <div>
                            <a-rate style="color: red;font-size: 12px;margin-bottom: 10px" disabled :value="data.star"/>
                        </div>
                        <div style="font-size: 12px;color: #868686;margin-bottom: 10px">
                            评论数： {{data.commentNum}} 条
                        </div>
                        <div style="color: #E01222">
                            ￥
                            <span style="font-size: 16px">
                                {{data.goodsSku?data.goodsSku.price:'0.00'}}
                            </span>
                        </div>
                    </a-card>
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import {getJsonUrlParam} from "../../utils/urlUtils";
    import commentApi from "../../api/goods/commentApi";

    export default {
        name: "publisbCommenet",
        data() {
            return {
                data: {},
                commentInfo: {},
                publishInfo: {
                    shopId: undefined,
                    content: "",
                    pictureList: [],
                    hasPicture: 0,
                    pid: 0,
                    orderId: -1,
                    skuId: -1,//回复时订单商品信息忽略
                    goodsId: -1,
                    spec: "..",
                    topId: 0,
                    type: 0,//1 好评 2 中评 3差评 0 普通回复评论
                    star: 0,
                    anonymous: 1, //是否匿名
                    anonymousTemp: true, //是否匿名
                    fromType: 2 //1:用户 0 商家 2 其他用户
                },
                repliedComment: {
                    //被回复的评论
                }
            }
        },
        created() {
            let jsonUrlParam = getJsonUrlParam();
            if (jsonUrlParam && jsonUrlParam.replyTo) {
                this.commentInfo = jsonUrlParam.replyTo
                this.loadData()
            }
        },
        methods: {
            toDetail(goods) {
                let uri = `/goodDetail?goodsInfo=${encodeURI(JSON.stringify({
                    id: goods.goodsId,
                    index: goods.specIndexes
                }))}`
                this.$router.push(encodeURI(uri))
            },
            loadData() {
                if (this.commentInfo && this.commentInfo.id) {
                    console.log(this.commentInfo)
                    commentApi.commentOne(this.commentInfo.id).then(resp => {
                        if (resp.data.flag) {
                            this.data = resp.data.data
                        }
                    })
                }
            },
            publishComment() {
                let info = this.publishInfo
                info.shopId = this.commentInfo.shopId;
                info.anonymous = info.anonymousTemp === true ? 1 : 0;
                info.topId = this.commentInfo.id
                info.pid = this.repliedComment.id ? this.repliedComment.id : this.commentInfo.id
                console.log(info)
                commentApi.reply(info).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message)
                        this.loadData()
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .comment-spec {
        font-size: 12px;
        color: #999;
        margin-top: 10px;
    }

</style>